<template>
  <div class="app-container">
    <div style="background-color: #fff; padding-bottom: 1rem">
      <el-form inline size="small">
        <el-form-item label="月">
          <el-date-picker
            v-model="dateTimeRange"
            type="month"
            value-format="yyyyMM"
          />
        </el-form-item>
      </el-form>
    </div>
    <div ref="echart" style="min-height: 250px; width: 100%; margin-bottom: 16px;"></div>
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#FAFBFD', color: '#6D6D6D'}"
      style="width: 100%; margin-bottom: 3rem;"
      border
      size="medium"
      show-summary
      :row-style="{cursor: 'pointer'}"
    >
      <el-table-column
        v-for="(item, index) in tableTitles"
        :index="index"
        :key="index"
        :prop="item.name"
        :label="item.title"
        align="center"
        :sortable="item.sortable"
      />
    </el-table>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { jsonToParams } from '@/utils'

import { GetLoginRep } from '@/api/Report'

const date = new Date()
let month = date.getMonth() + 1
if (month < 10) {
  month = '0' + month
}
const thisMonth = date.getFullYear() + '' + month
export default {
  name: 'User',
  data() {
    return {
      tableTitles: [
        {
          title: '日期',
          name: 'Date'
        },
        {
          title: '用户登入次数',
          name: 'LoginCount',
          sortable: true
        },
        {
          title: 'windows',
          name: 'WindowLoginCount',
          sortable: true
        },
        {
          title: 'android',
          name: 'AndroidLoginCount',
          sortable: true
        },
        {
          title: 'IOS',
          name: 'IOSLoginCount',
          sortable: true
        },
        {
          title: '群消息总数',
          name: 'GroupMsgCount',
          sortable: true
        },
        {
          title: '单聊消息总数',
          name: 'C2CMsgCount',
          sortable: true
        },
        {
          title: '单聊用户次数',
          name: 'C2CConvCount',
          sortable: true
        }
      ],
      tableData: [],
      dateTimeRange: thisMonth,
      dataParams: {
        month: thisMonth
      },
      echart: null
    }
  },
  watch: {
    // 监听对象temp，
    dataParams: {
      handler(newVal) {
        this.getDataList()
      },
      deep: true
    },
    dateTimeRange: {
      handler(newVal) {
        if (newVal === null) {
          this.dateTimeRange = newVal = thisMonth
        }

        this.dataParams.month = newVal
      },
      deep: true
    }
  },
  created() {
    this.getDataList()
  },
  mounted() {
    this.$nextTick(() => {
      this.echart = echarts.init(this.$refs['echart'])
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getDataList() {
      GetLoginRep(jsonToParams(this.dataParams)).then(res => {
        if (res.statusCode === 200) {
          res.data.forEach((item, index) => {
            const d = item.Date.split(' ')
            res.data[index]['Date'] = d[0]
          })
          this.tableData = res.data
          this.setOption()
        }
      })
    },
    setOption() {
      console.log(this.tableData)
      let option = {
        title: {
          text: '用户统计'
        },
        dataset: [
          {
            source: this.tableData
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Android',
            type: 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            encode: {
              x: 'Date',
              y: 'AndroidLoginCount'
            }
          },
          {
            name: '单聊用户次数',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            encode: {
              x: 'Date',
              y: 'C2CConvCount'
            }
          },
          {
            name: '单聊消息总数',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            encode: {
              x: 'Date',
              y: 'C2CMsgCount'
            }
          },
          {
            name: '群消息总数',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            encode: {
              x: 'Date',
              y: 'GroupMsgCount'
            }
          },
          {
            name: '用户登入次数',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            encode: {
              x: 'Date',
              y: 'LoginCount'
            }
          },
          {
            name: 'Windows',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            encode: {
              x: 'Date',
              y: 'WindowLoginCount'
            }
          },
          {
            name: 'IOS',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            encode: {
              x: 'Date',
              y: 'IOSLoginCount'
            }
          }
        ]
      }

      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
